<template>
  <div class="order-detail-container">
    <!-- 未支付状态提示头部 -->
    <div class="unpaid-header">
      <div class="status-notice">
        <i class="el-icon-exclamation-circle"></i>
        <span>该订单尚未支付，支付后将正式确认预订</span>
      </div>
    </div>
    
    <!-- 订单核心信息卡片 -->
    <el-card class="detail-card" shadow="hover">
      <div class="order-summary">
        <div class="info-group">
          <span class="group-label">订单编号</span>
          <span class="group-value">{{ orderData.id }}</span>
        </div>
        <div class="info-group">
          <span class="group-label">创建时间</span>
          <span class="group-value">{{ formatTime(orderData.createTime) }}</span>
        </div>
      </div>
       <div class="room-detail">
        <div class="room-image">
          <img :src="orderData.firstImageUrl" alt="会议室图片" class="room-img">
        </div>
        <div class="room-info">
          <div class="info-item">
            <span class="item-label">会议室名称:</span>
            <span class="item-value">{{ orderData.roomName }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">会议室类型:</span>
            <span class="item-value">{{ formatRoomType(orderData.roomType) }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">容纳人数:</span>
            <span class="item-value">{{ orderData.attendeeCount }}人</span>
          </div>
          <div class="info-item">
            <span class="item-label">会议室位置:</span>
            <span class="item-value">{{ orderData.roomLocation }}</span>
          </div>
        </div>
      </div>
       <div class="booking-time">
        <span class="time-label">预订时间:</span>
        <span class="time-value">{{ formatDateTime(orderData.startTime) }} - {{ formatDateTime(orderData.endTime) }}</span>
      </div>
      <div class="price-info">
        <div class="price-label">应付金额</div>
        <div class="price-value">¥{{ formatNumber(orderData.amount) }}</div>
      </div>
    </el-card>
    
    <!-- 会议室详情卡片
    <el-card class="detail-card" shadow="hover">
      <div class="room-detail">
        <div class="room-image">
          <img :src="orderData.firstImageUrl" alt="会议室图片" class="room-img">
        </div>
        <div class="room-info">
          <div class="info-item">
            <span class="item-label">会议室名称:</span>
            <span class="item-value">{{ orderData.roomName }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">会议室类型:</span>
            <span class="item-value">{{ formatRoomType(orderData.roomType) }}</span>
          </div>
          <div class="info-item">
            <span class="item-label">容纳人数:</span>
            <span class="item-value">{{ orderData.attendeeCount }}人</span>
          </div>
          <div class="info-item">
            <span class="item-label">会议室位置:</span>
            <span class="item-value">{{ orderData.roomLocation }}</span>
          </div>
        </div>
      </div>
      
      <div class="booking-time">
        <span class="time-label">预订时间:</span>
        <span class="time-value">{{ formatDateTime(orderData.startTime) }} - {{ formatDateTime(orderData.endTime) }}</span>
      </div>
    </el-card> -->
    
    <!-- 支付引导区域 -->
    <!-- <div class="payment-guide">
      <div class="guide-title">
        <i class="el-icon-coin"></i>
        <span>立即支付以确认预订</span>
      </div>
      <div class="payment-methods">
        <div class="method-item" @click="selectPayment('wechat')">
          <div class="method-icon {{paymentMethod === 'wechat' ? 'active' : ''}}">
            <i class="el-icon-wechat"></i>
          </div>
          <div class="method-name">微信支付</div>
        </div>
        <div class="method-item" @click="selectPayment('alipay')">
          <div class="method-icon {{paymentMethod === 'alipay' ? 'active' : ''}}">
            <i class="el-icon-alipay"></i>
          </div>
          <div class="method-name">支付宝</div>
        </div>
        <div class="method-item" @click="selectPayment('card')">
          <div class="method-icon {{paymentMethod === 'card' ? 'active' : ''}}">
            <i class="el-icon-s-finance"></i>
          </div>
          <div class="method-name">银行卡</div>
        </div>
      </div>
    </div> -->
    
    <!-- 操作按钮 -->
    <div class="order-actions">
      <el-button type="primary" :loading="payLoading" @click="submitPayment" class="pay-button">
        <i class="el-icon-coin"></i> 确认支付 {{ formatNumber(orderData.amount) }} 元
      </el-button>
      <el-button type="info" @click="backToList">
        <i class="el-icon-arrow-left"></i> 返回列表
      </el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "UnpaidOrderDetail",
  data() {
    return {
      orderData: {},
      paymentMethod: 'wechat', 
      payLoading: false 
    };
  },
  mounted() {
    this.fetchOrderDetail();
    console.log('OrderDetailPage mounted - 订单ID:',this.$route.query.id);
  },
  methods: {
    fetchOrderDetail() {
      const orderId = this.$route.query.id;
      axios.get('/customer/reservation/detail/'+orderId).then(res=>{
        if(res.data.code===200){
           this.orderData=res.data.data;
        }else {
            this.$message.error(res.data.msg || '获取数据失败')
        }
      });
    },

    formatDateTime(time) {
      if (!time) return '';
      return time.replace('T', ' ');
    },
    formatTime(time) {
      if (!time) return '';
      return time;
    },

    formatRoomType(type) {
      return type === 'classroom' ? '教室型' : '圆桌型';
    },

    selectPayment(method) {
      this.paymentMethod = method;
    },

    submitPayment() {
      this.payLoading = true;
      const orderId = this.$route.query.id;
      axios.post('/customer/reservation/'+orderId).then(res=>{
            if(res.data.code===200){
               setTimeout(() => {
                this.$confirm('支付成功!', '提示', {
                  confirmButtonText: '确定',
                  type: 'success',
                  showCancelButton: false
                }).then(() => {
                    this.$router.back();
                }).catch(() => {
                });
              }, 1500);
             }else {
               this.$message.error(res.data.msg || '支付失败！');
             }
        })
      
    },
    // 返回列表
    backToList() {
      this.$router.back();
    },
    formatNumber(amount){
       if(amount){
         return amount.toFixed(2);
       }
       return amount+'.00';
    }
  }
};
</script>

<style scoped>
.order-detail-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 未支付状态头部 */
.unpaid-header {
  background-color: #fff8e6;
  border-left: 4px solid #e6a23c;
  padding: 15px 20px;
  margin-bottom: 20px;
  border-radius: 0 4px 4px 0;
}

.status-notice {
  display: flex;
  align-items: center;
  color: #84642c;
  font-size: 14px;
}

.status-notice i {
  font-size: 18px;
  margin-right: 10px;
}

/* 订单核心信息卡片 */
.detail-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.order-summary {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.info-group {
  display: flex;
  flex-direction: column;
}

.group-label {
  color: #909399;
  font-size: 12px;
  margin-bottom: 2px;
}

.group-value {
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}

.price-info {
  padding: 20px 0;
  text-align: center;
}

.price-label {
  color: #909399;
  font-size: 14px;
  margin-bottom: 10px;
  display: block;
}

.price-value {
  color: #e6a23c;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 5px;
}

.price-desc {
  color: #909399;
  font-size: 12px;
}

/* 会议室详情卡片 */
.room-detail {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
}

.room-image {
  flex: 1 1 100%;
  max-width: 300px;
  margin: 0 auto 20px;
}

.room-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.room-info {
  flex: 1 1 calc(100% - 300px);
}

.info-item {
  display: flex;
  margin-bottom: 15px;
}

.item-label {
  width: 90px;
  color: #606266;
  font-size: 14px;
}

.item-value {
  color: #303133;
  font-size: 14px;
}

.booking-time {
  padding: 15px 0;
  border-top: 1px solid #ebeef5;
  font-size: 14px;
}

.time-label {
  color: #606266;
  margin-right: 10px;
}

.time-value {
  color: #303133;
}

/* 支付引导区域 */
.payment-guide {
  background-color: #f0f9ff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.guide-title {
  display: flex;
  align-items: center;
  color: #409eff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
}

.guide-title i {
  margin-right: 10px;
}

.payment-methods {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.method-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s;
}

.method-item:hover {
  background-color: #ecf5ff;
}

.method-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  font-size: 20px;
  color: #fff;
}

.method-icon.active {
  box-shadow: 0 0 0 2px #ecf5ff;
}

.method-icon.wechat {
  background-color: #07c160;
}

.method-icon.alipay {
  background-color: #1677ff;
}

.method-icon.card {
  background-color: #909399;
}

.method-name {
  font-size: 14px;
  color: #606266;
}

/* 操作按钮 */
.order-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
  align-items: center;
  margin-bottom: 100px;
}

.pay-button {
  height: 50px;
  width: 300px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  background-color: #14a55a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pay-button:hover{
    transform: scale(1.05);
}
.pay-button i {
  margin-right: 8px;
}
</style>